<template>
<view class="device">
	<!-- <view style="width: 100%; height: 660upx; overflow: hidden; position: relative;">
		<image src="/static/device.png" style="width: 100%; height: 868upx; position: absolute; left: 0; top: -110upx;"></image>		
	</view> -->
	<ad unit-id="adunit-26073b177a279bd1" ad-type="video" ad-theme="white"></ad>
	<!-- box-shadow: 0upx 0upx 17upx 1upx rgba(172, 172, 172, 0.22); margin-top: -30upx; -->
	<view style="width: 100%; height: auto; min-height: calc( 100% - 630upx ); background: #fff; border-radius: 30upx 30upx 0upx 0upx; position: relative;

		box-sizing: border-box; padding: 30upx;" v-if="info">
		<!-- <view style="font-size: 32upx; color: #000000;">计费规则</view> -->
		<view style="font-size: 32upx; color: #000000;">
			<text>{{ info.shopName || '暂无' }}</text>
		</view>
		<view style="font-size: 24upx; color: #58585a; line-height: 1.5; margin-top: 8upx;">计费规则：</view>
		<view style="font-size: 24upx; color: #ef7738; line-height: 1.5; margin-top: 8upx;" v-if="isFreeUser">今日剩余免费时长{{ todayFreeHour }}小时</view>
		<view style="font-size: 24upx; color: #ef7738; line-height: 1.5; margin-top: 8upx;" v-if="ifVipShop && user.vipStatus">{{ vipPrice }}<text style="color: #ccc; text-decoration: line-through; margin-left: 8upx;">{{ info.chargeMoney }}</text></view>
		<view style="font-size: 24upx; color: #ef7738; line-height: 1.5; margin-top: 8upx;" v-else>{{ info.chargeMoney }}</view>
		<view style="font-size: 24upx; color: #58585a; line-height: 1.5;">借租{{info.freeTime}}分钟内免费，日封顶{{info.highest}}元，总封顶{{info.highestSum}}元</view>
		<view style="font-size: 24upx; color: #58585a; line-height: 1.5;">押金{{info.highestSum}}元，支持免押服务</view>
		<view style="width: 100%; height: 2upx; background: #cdcdcd; margin-top: 20upx;"></view>
		<!-- <view style="font-size: 32upx; color: #000000; line-height: 1.5; margin-top: 14upx;">适配接口</view>
		<image src="/static/devicetype.png" style="width: 100%; height: 92upx; margin-top: 20upx;"></image> -->
		<template v-if="user.phone">
			<view v-if="ifNeedDeposit || ifYajin" style="width: 100%; height: 100upx; background: rgba(4, 190, 2, 0.8);
				border-radius: 10upx; color: #fff; text-align: center; display: flex; flex-direction: column; line-height: 1.2;
				justify-content: center; align-items: center; margin-top: 20upx;" @click="querenzujie">
				<view style="font-size: 36upx;">确认租借</view>
			</view>
			<view v-else style="width: 100%; height: 100upx; background: rgba(4, 190, 2, 0.8);
				border-radius: 10upx; color: #fff; text-align: center; display: flex; flex-direction: column; line-height: 1.2;
				justify-content: center; align-items: center; margin-top: 20upx;" @click="querenzujie">
				<view style="font-size: 30upx;">免押金租借</view>
				<view style="font-size: 22upx; margin-top: 10upx;">微信支付分｜550及以上优惠</view>
			</view>
		</template>
		<template v-else>
			<!-- 有押金或者需要缴纳押金 -->
			<!-- <view v-if="ifNeedDeposit || ifYajin" style="width: 100%; height: 100upx; background-image: linear-gradient(209deg, #ef6e2a 0%, #ed7739 50%, #ea7f48 100%), linear-gradient(#000000, #000000);
				box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33); border-radius: 50upx; color: #fff; text-align: center; display: flex; flex-direction: column;
				justify-content: space-around; align-items: center; margin-top: 20upx;" @click="phoneBlank = true">
				<view style="font-size: 36upx;">押金租借</view>
			</view> -->
			<view v-if="ifNeedDeposit || ifYajin" style="width: 100%; height: 100upx; background: rgba(4, 190, 2, 0.8);
				border-radius: 10upx; color: #fff; text-align: center; display: flex; flex-direction: column; line-height: 1.2;
				justify-content: center; align-items: center; margin-top: 20upx;" @click="phoneBlank = true">
				<view style="font-size: 36upx;">押金租借</view>
			</view>
			<view v-else style="width: 100%; height: 100upx; background: rgba(4, 190, 2, 0.8);
				border-radius: 10upx; color: #fff; text-align: center; display: flex; flex-direction: column; line-height: 1.2;
				justify-content: center; align-items: center; margin-top: 20upx;" @click="phoneBlank = true">
				<view style="font-size: 30upx;">免押金租借</view>
				<view style="font-size: 22upx; margin-top: 10upx;">微信支付分｜550及以上优惠</view>
			</view>
		</template>
		
		<view v-if="user.vipStatus != 1 && ifVipShop" style="width: 100%; height: 100upx; background: #d5aa75;
			box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33); border-radius: 10upx; color: #fff; text-align: center; display: flex; flex-direction: column;
			justify-content: space-around; align-items: center; margin-top: 50upx; position: relative;" @click="goHuiyuan">
			<view style="width: 200upx; height: 50upx; background: url(./static/hypop.png) center center / 100% 100%; position: absolute; right: 40upx; top: -20upx;
				line-height: 50upx; text-align: center; color: #fff; font-size: 28upx;">享5折优惠</view>
			<view style="font-size: 36upx;">会员租借</view>
		</view>
		<view v-if="!ifYajin" style="width: 100%; height: 50upx; line-height: 50upx; text-align: center; margin-top: 20upx; font-size: 24upx;">	
			<!-- <view style="height: 30upx; display: flex; flex-direction: row; justify-content: center; 
				align-items: center; transform: scale(1.2);">
				<image src="../../static/xinyong.png" style="height: 100%; width: 145upx;"></image>
				<view style="height: 24upx; width: 1upx; background: #666; opacity: 0.6; margin: 0 7upx;"></view>
				<view style="font-size: 22upx; color: #666;">550分及以上信用优享</view>
			</view> -->
			<view style="text-align: left;">
				<checkbox-group @change="changeCheck" style="display: inline-block; transform-origin: 50% 50%; transform: scale(0.8);">
					<checkbox value="check" :checked="true"/>
				</checkbox-group>
				<text>点击即同意</text>
				<text @click="weituoshu(1)" style="color: #04BE02;">《委托扣款授权书》</text>
				<text @click="weituoshu(2)" style="color: #04BE02;">《用户协议》</text>
			</view>
		<!-- 	<view v-if="user.vipStatus == 0 || user.vipStatus == 2" style="text-align: left;">
				<checkbox-group @change="changeCheck" style="display: inline-block; transform-origin: 50% 50%; transform: scale(0.8);">
					<checkbox value="check" :checked="true"/>
				</checkbox-group>
				<text>点击即同意</text>
				<text @click="weituoshu(4)" style="color: #04BE02;">《会员协议说明》</text>
				<text @click="weituoshu(5)" style="color: #04BE02;">《隐私协议》</text>
			</view> -->
		</view>
	</view>
	<cover-view v-if="phoneBlank" style="height: 100%; width: 100%; position: absolute; left: 0; top: 0; z-index: 100; background: rgba(0, 0, 0, 0.2);">
		<cover-view style="height: 480upx; width: 100%; background: #fff; position: absolute; left: 0; bottom: 0; z-index: 101;
			border-radius: 30upx 30upx 0upx 0upx; box-shadow: 0upx -3upx 10upx 0upx rgba(241, 243, 245, 0.54);">			
			<cover-image style="width: 568upx; height: 188upx; position: absolute; z-index: 101; left: 30upx; top: 60upx;" src="/static/phone.png"></cover-image>
			<button open-type="getPhoneNumber" lang="zh_CN" @getphonenumber="authPhone" style="width: 690upx; height: 90upx; line-height: 90upx; background: #EF7738;
				box-shadow: 0upx 3upx 17upx 1upx rgba(239, 146, 98, 0.33); border-radius: 45upx; color: #fff; font-size: 30upx; text-align: center; position: absolute;
				left: 30upx; bottom: 80upx; z-index: 101;">绑定手机号</button>
			<cover-view style="text-align: center; font-size: 26upx; color: #666; line-height: 2; position: absolute; z-index: 101; left: 0; bottom: 15upx; 
				text-decoration: underline; width: 100%;" @click="phoneBlank = false">暂不授权</cover-view>
		</cover-view>
	</cover-view>
</view>
</template>

<script>
import { HTTP } from '../../http.js';
let http = new HTTP;
export default {
	data() {
		return {
			info: null,
			shebeiId: '',
			// 是否缴纳了押金
			ifYajin: false,
			check: true,
			isFreeUser: false,
			todayFreeHour: 0,
			interstitialAd: null,
			user: {},
			phoneBlank: false,
			
			ifVipShop: undefined,
			vipPrice: '',
			ifNeedDeposit: undefined
		}
	},
	methods: {
		goHuiyuan() {
			uni.navigateTo({ url: 'huiyuan' }); 
		},
		authPhone(e) {
			console.log(e);
			let sessionKey = this.user.sessionKey;
			let encryptedData = e.detail.encryptedData, iv = e.detail.iv;
			if (!encryptedData || !iv) {
				return ;
			}
			console.log(sessionKey, 'sessionKey');
			http.request({
				url: `login/decodeWxPhone?sessionKey=${ encodeURIComponent(sessionKey) }&encryptedData=${ encodeURIComponent(encryptedData) }&iv=${ encodeURIComponent(iv) }`,
				method: 'get',
				success: (res) => {
					this.user.phone = res.dataList.phoneNumber;
					uni.setStorage({ key: 'user', data: this.user });
					this.phoneBlank = false;
				}
			});
		},
		querenzujie() {
			// wx.requestSubscribeMessage({
			// 	tmplIds: [ 'dcslc53k0eUu_sDiYId30Ba-xiUCvl5_Smuu2N-1AmQ', 'sTEk4lBOcbWffJB6BVxYrM5ceW5YJZ780-NGcuBkDjw' ],
			// 	success: (res) => {
				// 加载插屏广告
				// this.showAD();
				uni.showLoading({ title: '加载中' });
				if(this.ifYajin || this.ifNeedDeposit) {				
					this.yajinZujie();
				} else {
					if( this.check ){					
						this.mianyaZujie();
					}else{		
						uni.hideLoading();
						uni.showModal({
							title: '提示',
							content: '您未勾选授权书，不能享受免押金服务，是否前往缴纳押金？',
							success: (res) => {
								if ( res.confirm ) { uni.navigateTo({ url: 'yajin' }); }
							}
						});	
					}		
				}		
			// 	}
			// });
			
		},
		weituoshu(type) {
			uni.navigateTo({ url: 'shouquanshu' + type });
		},
		yajinZujie() {
			if (this.ifYajin) {
				this.yajinZujie2();
			} else {
				uni.showLoading({ title: '加载中' });
				http.request({
					url: `borrow/deposit?openId=${this.user.wxOpenId}`,
					method: 'post',
					success: (res)=>{
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.dataList.timeStamp,
							nonceStr: res.dataList.nonceStr,
							package: res.dataList.package,
							signType: 'MD5',
							paySign: res.dataList.paySign,
							success: (res)=>{						
								uni.hideLoading();	
								this.ifYajin = true;
								this.yajinZujie2();
							},
							fail: (err)=>{				
								uni.hideLoading();						
								uni.showToast({ icon: 'none', title: '押金缴纳失败！', duration: 2000 });		
							}
						});					
					}
				});
			}
		},
		yajinZujie2() {
			http.request({
				url: `borrowV2?id=${this.shebeiId}`,
				method: 'post',
				success: (res)=>{					
					uni.hideLoading();
					uni.showModal({ 
						title: '提示', content: '租借成功', 
						showCancel: false,
						complete: () => {
							uni.navigateBack({ delta: 1 });
						}
					});
					this.shouAD();
				},
				fail: (err)=>{			
					uni.hideLoading();
				}
			});	
		},
		mianyaZujie() {
			http.request({
				url: `wxV3/createrentbill?id=${this.shebeiId}`,
				method: 'post',
				success: (res) => {		
					uni.hideLoading();
					let data = res.dataList || {};
					if ( wx.openBusinessView ) {
						wx.openBusinessView({
							businessType: 'wxpayScoreUse',
							extraData: {
								mch_id: data.mch_id,
								package: data.package,
								timestamp: data.timestamp,
								nonce_str: data.nonce_str,
								sign_type: data.sign_type,
								sign: data.sign
							},
							envVersion: 'release',
							success(e) {
								console.log(e, '成功参数')
								if( e.extraData && e.extraData.query_id ){
									uni.showModal({ 
										title: '提示', content: '租借成功', 
										showCancel: false,
										complete: () => { uni.navigateBack({ delta: 1 }); }
									});
									this.shouAD();
								}else{
									console.log('系统繁忙之后');
								}
							},
							fail(e) {
								uni.showModal({
									title: '提示',
									content: '免押金签约失败，前往缴纳押金？',
									success: (res) => { if ( res.confirm ) { uni.navigateTo({ url: 'yajin' }); } }
								});							
							}
						});
					} else {
						//引导用户升级微信版本 
						wx.showModal({
							title: '提示',
							content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。'
						});
					}
				},
				fail: (err)=>{		
					uni.hideLoading();	
					console.log(err);						
				}
			});	
		},
		changeCheck(e) {
			if (e.type == "change" && e.detail.value.length > 0) {
				this.check = true;
			} else {
				this.check = false;
			}
		},
		getFreetime(user) {
			http.request({
				url: `SpecialUserController/findUserFreeTime?sn=${ this.shebeiId }&userId=${ user.userId }`,
				method: 'get',
				success: (res) => {	
					console.log(res, 'resinfo')
					this.isFreeUser = res.dataList.isFreeUser;
					this.todayFreeHour = res.dataList.todayFreeHour;
				}
			});
		},
		showAD() {
			if(this.interstitialAd) {
				this.interstitialAd.show().catch((err) => { console.log(err); console.log('广告失败') });
			}
		},
		getVipAndDeposit() {
			http.request({
				url: `vip/checkVipShop?sn=${ this.shebeiId }`,
				method: 'get',
				success: (res) => {	
					let info = res.dataList || {};
					this.ifVipShop = info.vipStatus == 1;
					if (this.user.vipStatus == 1 && this.ifVipShop) {
						this.vipPrice = `${ info.chargeMoney / 2 }元/${ info.chargeTime }${ info.chargeUnit ? '分钟' : '小时' }`;
					}
				}
			});
			if (this.user.vipStatus == 1) {
			} else if (this.user.vipStatus != 1 && this.ifNeedDeposit === undefined) {
				http.request({
					url: `vip/canDeposit?sn=${ this.shebeiId }&userId=${ this.user.userId }`,
					method: 'get',
					success: (res) => {	
						this.ifNeedDeposit = res.dataList || false;
					}
				});
			} else {
				console.log('已获取信息');
			}
		}
	},
	onShow() {
		let user = uni.getStorageSync('user');
		this.user = JSON.parse(JSON.stringify(user));
		let pages = getCurrentPages();
		let page = pages[pages.length - 1];
		this.shebeiId = page.options.id;
		
		this.getVipAndDeposit();
	},
	
	onLoad() {
		let user = uni.getStorageSync('user');
		let interstitialAd = null;
		// if (wx.createInterstitialAd) {
		// 	this.interstitialAd = interstitialAd = wx.createInterstitialAd({ adUnitId: 'adunit-7d98ee4f11ad2239' });
		// 	interstitialAd.onLoad((err) => { console.log('广告load'); console.log(err) });
		// 	interstitialAd.onError((err) => { console.log('广告错误'); console.log(err) });
		// 	interstitialAd.onClose(() => {});
		// }
		
		let pages = getCurrentPages();
		let page = pages[pages.length - 1];
		this.shebeiId = page.options.id;
		
		http.request({
			url: `borrow/myWallet?sn=${this.shebeiId}`,
			method: 'get',
			success: (res) => {		
				let info = res.dataList || {};
				if(info.deposit > 0) { this.ifYajin = true; }
			}
		});
		http.request({
			url: `chargerPlaEquipmentController/getSNEquipmentStatus?sn=${this.shebeiId}`,
			method: 'get',
			success: (res) => {		
				console.log(res, '设备信息');
				let info = res.dataList || {};
				if(info.ifOnline != 0) { 
					uni.showModal({
						title: '提示',
						content: '该设备正处于离线状态，请尝试其它设备或稍后再次尝试。',
						success: (res) => { uni.navigateBack({ delta: 1 }); }
					});
				} else if (info.ifBorrow != 0) { 
					uni.showModal({
						title: '提示',
						content: '该设备剩余充电宝电量不足，正在努力充电中，请尝试其它设备或稍后再次尝试。',
						success: (res) => { uni.navigateBack({ delta: 1 }); }
					});
				} else if( info.ifFault != 0 ) { 
					uni.showModal({
						title: '提示',
						content: '该设备处于故障中，请尝试其它设备。',
						success: (res) => { uni.navigateBack({ delta: 1 }); }
					});
				} else {
				}
				this.info=info;
			}
		});
		this.getFreetime(user);
	}
}
</script>

<style>
.device {
	height: 100vh;
	position: relative;
	background: #fff;
	overflow: auto;
}
</style>